<template>
    <el-dialog class="error_dialog" modal-class="error_dialog_model" :show-close="false"
        v-model="userStore.showerrordialog" width="550px" style="z-index: 999997" center>
        <template #header="{ close, titleId, titleClass }">
            <div class="error_dialog_header">
                <div class="app_dialog_bg"></div>
                <img src="@/assets/updata/zhuti.png" class="update_dialog_body_img" alt="">
                <div class="close" style="cursor: pointer" @click="userStore.showerrordialog = false">
                    <img style="width: 40px; height: 40px;" :src="delclose" />
                </div>
            </div>
        </template>
        <div class="error_dialog_body">
            <div class="error_dialog_body_text">服务器正在升级中...</div>
            <div>
                <el-button type="primary" @click="userStore.showerrordialog = false"
                    style="background-color: #e92937;border-color: #e92937; width: 180px; height: 40px"
                    class="error_dialog_body_button">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import del from '@/assets/updata/del-default.png'
import delclose from '@/assets/updata/del-close.png'
const userStore = useUserStore()
</script>

<style lang="scss" scoped>
.error_dialog_header {
    width: 550px;
    height: 139px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    position: relative;
}

.app_dialog_bg {
    background-image: url('@/assets/updata/bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 534px;
    height: 139px;
}

.error_dialog_body {
    position: relative;
    height: 244px;
    border-radius: 4px 4px 0 0;
    background-color: #fff;
    padding: 48px 48px 0 48px;
    font-family: PingFangSC;
    margin-top: -50px;
    z-index: 999998;
    -webkit-clip-path: polygon(0 0, 100% 40px, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 40px, 100% 100%, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
}

.update_dialog_body_img {
    width: 300px;
    height: 240px;
    position: absolute;
    z-index: 999999;
    right: 0;
    top: 0;
}

.close {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 11;
    right: 20px;
    top: 0;
    cursor: pointer;
}

.error_dialog_body_text {
    font-size: 16px;
    font-weight: 700;

    color: rgba(0, 0, 0, 0.88);
    margin-bottom: 24px;
    margin-top: 116px;
}

.error_dialog_body_button {
    width: 180px;
    height: 40px;
}
</style>

<style>
.error_dialog {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    font-family: PingFangSC;
    border-radius: 0;
}

.error_dialog .el-dialog__header {
    padding-bottom: 0;
}

.error_dialog_model {
    /* background-color: rgba(37, 42, 48, 0.7); */
}
</style>